/**
 * 更多菜单
 * @flow
 */
'use strict';
import React, {Component, PropTypes} from 'react'
import {
    TouchableHighlight,
    Text,
    View,
} from 'react-native'
import Popover from "./Popover";
import InitiatedTravels from '../Pages/InitiatedTravels';
import InitiatedQuestion from '../Pages/InitiatedQuestion';
import InitiatedWithTour from '../Pages/InitiatedWithTour';
import Global from "../Commom/GlobalConst";
import Toast from "../Utils/toast";
export const MORE_MENU = {
    InitiatedWithTour: '自驾约伴',
    InitiatedQuestion: '有问必答',
    InitiatedTravels: '游记',
    CityOne: '珠海',
    CityTwo: '广州',
    CityThree: '深圳',
};
import RegisteredContainer from '../Containers/RegisteredContainer';
export default class MoreMenu extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isVisible: false,
            buttonRect: {},
        }
    }

    static propTypes = {
        contentStyle: View.propTypes.style,
        menus: PropTypes.array,
        contentMarginRight: PropTypes.number.isRequired,
    };

    open() {
        this.showPopover();
    }

    showPopover() {
        if (!this.props.anchorView)return;
        let anchorView = this.props.anchorView;
        anchorView = anchorView.refs.moreMenuButton;
        anchorView.measure((ox, oy, width, height, px, py) => {
            this.setState({
                isVisible: true,
                buttonRect: {x: px, y: py, width: width, height: height}
            });
        });
    }

    closePopover() {
        this.setState({
            isVisible: false,
        });
        if (typeof(this.props.onClose) == 'function')this.props.onClose();
    }

    onMoreMenuSelect(tab) {
        this.closePopover();
        if (typeof(this.props.onMoreMenuSelect) == 'function')this.props.onMoreMenuSelect(tab);
        let navigator = this.props.navigator;
        switch (tab) {
            case MORE_MENU.InitiatedTravels:
                if (Global.Const.token == '') {
                    // Toast.show('请先登录！');
                    this.props.navigator.push({
                        id: 'RegisteredContainer',
                        component: RegisteredContainer,
                        passProps: {},
                    });
                    return;
                }
                navigator.push({
                    name: 'InitiatedTravels',
                    component: InitiatedTravels,
                    passProps: {}
                });
                break;
            case MORE_MENU.InitiatedWithTour:
                if (Global.Const.token == '') {
                    // Toast.show('请先登录！');
                    this.props.navigator.push({
                        id: 'RegisteredContainer',
                        component: RegisteredContainer,
                        passProps: {},
                    });
                    return;
                }
                navigator.push({
                    name: 'InitiatedWithTour',
                    component: InitiatedWithTour,
                    passProps: {}
                });
                break;
            case MORE_MENU.InitiatedQuestion:
                if (Global.Const.token == '') {
                    // Toast.show('请先登录！');
                    this.props.navigator.push({
                        id: 'RegisteredContainer',
                        component: RegisteredContainer,
                        passProps: {},
                    });
                    return;
                }
                navigator.push({
                    name: 'InitiatedQuestion',
                    component: InitiatedQuestion,
                    passProps: {},
                });
                break;
        }
    }

    renderMoreView() {
        let contentMarginRight = this.props.contentMarginRight;
        return (
            <Popover
                isVisible={this.state.isVisible}
                fromRect={this.state.buttonRect}
                placement="bottom"
                onClose={()=>this.closePopover()}
                contentStyle={{opacity: 0.82, backgroundColor: '#343434'}}
                contentMarginRight={contentMarginRight}
            >
                <View style={{alignItems: 'center',}}>
                    {this.props.menus.map((result, i, arr) => {
                        return <TouchableHighlight key={i} onPress={()=>this.onMoreMenuSelect(arr[i])}
                                                   underlayColor='transparent'>
                            <Text
                                style={{fontSize: 18, color: 'white', padding: 8, fontWeight: '400'}}>
                                {arr[i]}
                            </Text>
                        </TouchableHighlight>
                    })
                    }

                </View>
            </Popover>
        );
    }

    render() {
        return (this.renderMoreView());
    }

}